<template>

	<div class="product-add">
		<!--form表单-->
		<el-form size="small" ref="form" :model="form" label-width="180px">
			<!--添加门店-->
			<div class="common-form">添加门店</div>
			<el-form-item label="选择用户">
			  <el-row>
				<el-button @click="addClick" icon="Plus">选择会员</el-button>
				<div v-if="form.user_id!=''" class="img">
						  <div>{{user_info.nickName}}</div>
				  <img :src="user_info.avatarUrl" width="100" height="100" />
				</div>
			  </el-row>
			</el-form-item>
			<el-form-item label="门店名称" prop="store_name" :rules="[{required: true,message: ' '}]">
				<el-input v-model="form.store_name" placeholder="请输入门店名称" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="门店logo">
				<el-row class="d-c">
					<el-button icon="Picture" @click="openUpload" style="width: 92px;">选择图片</el-button>
					<div v-if="form.logo_image_id!=''" class="img">
						<img :src="file_path" width="100" height="100" />
					</div>
					<div class="gray">建议上传图像的尺寸比例为100:84</div>
				</el-row>
			</el-form-item>
			<el-form-item label="团队平级奖比例" prop="level_bili" :rules="[{required: true,message: ' '}]">
				<el-input v-model="form.level_bili" placeholder="请输入团队平级奖比例" type="number" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="指定专区上浮比例" prop="up_bili" :rules="[{required: true,message: ' '}]">
				<el-input v-model="form.up_bili" placeholder="请输入指定专区上浮比例" type="number" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="联系人" prop="linkman" :rules="[{required: true,message: ' '}]">
				<el-input v-model="form.linkman" placeholder="请输入门店联系人" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="联系电话" prop="phone" :rules="[{required: true,message: ' '}]">
				<el-input v-model="form.phone" placeholder="请输入门店联系电话" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="营业时间" prop="shop_hours" :rules="[{required: true,message: ' '}]">
				<el-input v-model="form.shop_hours" placeholder="请输入营业时间,例如:8:30-17:30" class="max-w460"></el-input>
			</el-form-item>

			<el-form-item label="门店区域">
				<el-select v-model="form.province_id" placeholder="省" @change="initCity">
					<el-option :label="item.name" :value="item.id" v-for="(item,index) in areaList"
						:key='index'></el-option>
				</el-select>
				<el-select v-if="form.province_id!=''" v-model="form.city_id" placeholder="市" @change="initRegion"
					class="ml4">
					<el-option :label="item1.name" :value="item1.id"
						v-for="(item1,index1) in areaList[form.province_id]['city']" :key='index1'></el-option>
				</el-select>
				<el-select v-if="form.city_id!=''" v-model="form.region_id" placeholder="区" class="ml4">
					<el-option :label="item2.name" :value="item2.id"
						v-for="(item2,index2) in areaList[form.province_id]['city'][form.city_id]['region']"
						:key='index2'></el-option>
				</el-select>

			</el-form-item>
			<el-form-item label="详细地址" prop="address" :rules="[{required: true,message: ' '}]">
				<el-input v-model="form.address" placeholder="请输入详细地址" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="门店坐标">
				<div class=" d-s-c">
					<el-button v-if="tx_key" icon="LocationInformation" @click="mapClick()">选择经纬度</el-button>
					<div class="ml10"></div>
					<div class="max-w460">
						<el-input v-model="form.coordinate"></el-input>
					</div>
					<div><a href="https://lbs.qq.com/getPoint/" target="_blank">腾讯地图坐标获取</a></div>
				</div>
				<div class="tips" style="color: red;">
					未申请腾讯地图key，在腾讯地图里面搜索地址获取经纬度，例40.002749,116.323467
				</div>
			</el-form-item>
			<el-form-item label="门店简介">
				<el-input type="textarea" v-model="form.summary" placeholder="请输入门店简介" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="门店排序">
				<el-input type="number" v-model="form.sort" placeholder="请输入门店排序" class="max-w460"></el-input>
			</el-form-item>
			<el-form-item label="自提核销">
				<el-radio-group v-model="form.is_check">
					<el-radio :label="1">支持</el-radio>
					<el-radio :label="0">不支持</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="门店状态">
				<el-radio-group v-model="form.status">
					<el-radio :label="1">启用</el-radio>
					<el-radio :label="0">禁用</el-radio>
				</el-radio-group>
			</el-form-item>

			<!--提交-->
			<div class="common-button-wrapper">
				<el-button size="small" type="info" @click="cancelFunc">取消</el-button>
				<el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
			</div>
		</el-form>
		<!--上传图片组件-->
		<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
		<!--地图组件-->
		<Map :open="open_map" :mapData="mapData" :tx_key="tx_key" @close="closeDialogFunc($event, 'map')"></Map>
		<GetUser :is_open="open_add" @close="closeDialogFuncs"></GetUser>
	</div>
</template> 

<script>
	import StoreApi from '@/api/store.js';
	import Upload from '@/components/file/Upload.vue';
	import Map from './dialog/Map.vue';
	import GetUser from '@/components/user/GetUser.vue';
	export default {
		components: {
			/*腾讯地图拾取器*/
			Map,
			Upload,
			GetUser
		},
		data() {
			return {
				/*form表单数据*/
				form: {
					store_name: '',
					logo_image_id: 0,
					linkman: '',
					phone: '',
					shop_hours: '',
					province_id: '',
					city_id: '',
					region_id: '',
					address: '',
					coordinate: '',
					summary: '',
					sort: 1,
					is_check: 1,
					status: 1,
					is_search_map: false,
					level_bili:'',
					up_bili:'',
					user_id:0,
				},
				file_path: '',
				/*省市区*/
				areaList: [],
				/*是否上传图片*/
				isupload: false,
				loading: false,
				open_map: false,
				mapData: {},
				tx_key: '',
				open_add: false,
				user_info: {},
			};
		},
		created() {
			/*引用的select_region 初始化*/
			this.getData();
		},

		methods: {
			addClick() {
			  this.open_add = true;
			},
			
			/*关闭获取用户弹窗*/
			closeDialogFuncs(e) {
				console.log(e);
			  if (e && e.type != 'error') {
			    this.user_info = e.params[0];
			    this.form.user_id = e.params[0].user_id;
			  }
			  this.open_add = false;
			},
			getData() {
				let self = this;
				StoreApi.toAddShop({}, true)
					.then(res => {
						self.areaList = res.data.regionData;
						self.tx_key = res.data.key;
					})
					.catch(error => {

					});
			},
			/*添加用户*/
			onSubmit() {
				let self = this;
				let form = self.form;
				self.$refs.form.validate((valid) => {
					if (valid) {
						self.loading = true;
						StoreApi.addShop(form, true)
							.then(data => {
								self.loading = false;
								if (data.code == 1) {
									ElMessage({
										message: '恭喜你，添加成功',
										type: 'success'
									});
									self.$router.push('/store/store/index');
								} else {
									self.loading = false;
								}
							})
							.catch(error => {
								self.loading = false;
							});
					}
				});
			},
			/*打开地图*/
			mapClick() {
				this.mapData.coordinate = this.form.coordinate;
				this.mapData.address = this.form.address;
				this.open_map = true;
			},
			/*关闭获取用户弹窗*/
			closeDialogFunc(e, f) {
				if (f == 'map') {
					if (e && e.type != 'error' && e.params.coordinate) {
						this.form.address = e.params.address;
						this.form.coordinate = e.params.coordinate;
					}
					this.open_map = false;
				}
			},
			/*初始化城市id*/
			initCity() {
				this.form.city_id = ''
			},

			/*初始化区id*/
			initRegion() {
				this.form.region_id = ''
			},

			/*获取经纬度*/
			getMapdataFunc(e) {
				this.form.coordinate = e.data[0].toFixed(6) + ',' + e.data[1].toFixed(6);
			},

			/*上传*/
			openUpload(e) {
				this.type = e;
				this.isupload = true;
			},

			/*获取图片*/
			returnImgsFunc(e) {
				if (e != null && e.length > 0) {
					this.file_path = e[0].file_path;
					this.form.logo_image_id = e[0].file_id;
				}
				this.isupload = false;
			},

			/*选择的地址*/
			choseFunc(e) {
				this.form.coordinate = e.location.lat + ',' + e.location.lng;
				this.form.address = e.address;

			},

			/*取消*/
			cancelFunc() {
				this.$router.back(-1);
			}

		}

	};
</script>

<style lang="scss" scoped>
	.basic-setting-content {}

	.product-add {
		padding-bottom: 50px;
	}

	.img {
		margin-top: 10px;
	}
</style>